<template>
  <view class="syntax-page">
    <view class="page-title">语法</view>
    <view class="content">
      <view class="section">
        <view class="section-title">1. 模板语法</view>
        <view class="section-content">
          <view class="example">
            <view class="example-title">插值表达式</view>
            <view class="code">{{ message }}</view>
            <view class="desc">通过双大括号绑定数据，支持简单表达式（如 {{ count + 1 }}）</view>
          </view>
          <view class="example">
            <view class="example-title">指令绑定</view>
            <view class="code">
              &lt;view v-if="isShow"&gt;条件渲染&lt;/view&gt;<br>
              &lt;view v-for="item in list" :key="item.id"&gt;{{ item.name }}&lt;/view&gt;
            </view>
            <view class="desc">v-if 控制显示/隐藏，v-for 循环渲染列表（需绑定 key）</view>
          </view>
        </view>
      </view>
      <view class="section">
        <view class="section-title">2. 事件处理</view>
        <view class="section-content">
          <view class="code">&lt;button @click="handleClick"&gt;点击按钮&lt;/button&gt;</view>
          <view class="desc">通过 @ 符号绑定事件，方法定义在 script 中</view>
        </view>
      </view>
    </view>
    <PageNav currentPage="syntax" />
  </view>
</template>

<script setup>
import PageNav from '@/components/PageNav.vue';
const message = "Hello UniApp";
</script>

<style scoped>
.syntax-page {
  padding: 20rpx;
  min-height: 100vh;
  padding-bottom: 100rpx;
  background-color: #f5f5f5;
}
.page-title {
  font-size: 32rpx;
  font-weight: bold;
  text-align: center;
  margin: 30rpx 0;
  color: #333;
}
.content {
  background-color: #fff;
  border-radius: 8rpx;
  padding: 20rpx;
}
.section {
  margin-bottom: 30rpx;
}
.section-title {
  font-size: 28rpx;
  font-weight: 600;
  color: #333;
  margin-bottom: 15rpx;
  padding-left: 10rpx;
  border-left: 4rpx solid #007aff;
}
.example {
  margin-bottom: 20rpx;
}
.example-title {
  font-size: 26rpx;
  color: #007aff;
  margin-bottom: 10rpx;
}
.code {
  font-size: 24rpx;
  padding: 15rpx;
  background-color: #f9f9f9;
  border-radius: 4rpx;
  margin-bottom: 10rpx;
  white-space: pre-wrap;
}
.desc {
  font-size: 24rpx;
  color: #666;
  padding-left: 10rpx;
}
</style>